<template>
	<div class="details-focus">

		<mt-swipe :auto="2000" :show-indicators="false">

			<mt-swipe-item v-for="item in androidImageList" track-by="$index">
				<img :src="item.sourceFullImage" alt="{{spuName}}" />
			</mt-swipe-item>

		</mt-swipe>

		<goback></goback>
		<more @click='togglePop'></more>
		<div class="pop">
			<mt-popup :visible.sync="popupVisible">
				<ul>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">分享</a>
					</li>
				</ul>
				<div class="arrow"></div>
			</mt-popup>
		</div>
	</div>

</template>

<script type="text/javascript">
	Vue.config.debug = true;
	import Vue from 'vue';
	//弹窗
	import {
		Popup,
		Tabbar,
		TabItem,
		TabContainer,
		TabContainerItem
	} from 'mint-ui';
	Vue.component(Popup.name, Popup);
	//返回
	import goback from '../common/goback';
	//更多
	import more from '../common/more';
	//轮播
	import Swipe from '../common/swipe';
	import SwipeItem from '../common/swipe-item';
	Vue.component(Swipe.name, Swipe);
	Vue.component(SwipeItem.name, SwipeItem);

	export default {
		data() {
				return {
					popupVisible: false,
					spuName: '', // 移动端 主图
					androidImageList: [] // 移动端图片列表
				}
			},
			methods: {
				togglePop: function() {
					this.popupVisible = !this.popupVisible;
				}
			},
			events: {
				// 父级传递消息
				detailsFocusDataEvent: function(msg) {

					if(msg) {
						this.spuName = msg['spuName'];
						this.androidImageList = msg['androidImageList'];
					}

				}
			},
			components: {
				goback,
				more
			}
	}
</script>
<style lang="scss" >
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	.details-focus {
		padding-bottom: rem(10);
		overflow: hidden;
		background: $_fff;
		.pop {
			.mint-popup {
				top: rem(88);
				left: rem(290);
				background: $_333;
				width: rem(148);
				border-radius: rem(4);
				ul {
					li {
						a {
							display: block;
							width: rem(148);
							height: rem(38);
							padding-left: rem(15);
							line-height: rem(38);
							color: $_999;
							font-size: rem(14);
							box-sizing: border-box;
						}
					}
					li:nth-of-type(1) {
						border-radius: rem(4) rem(4) 0 0;
						border: 1px solid $_666;
					}
				}
				.arrow {
					position: absolute;
					width: rem(25);
					height: rem(25);
					background: $_333;
					top: rem(-3);
					right: rem(5);
					transform: rotate(45deg);
				}
			}
			.v-modal {
				opacity: 0;
			}
		}
	}
</style>